<template>
  <div class="name-div" id="titleDiv">
    <iconfont style="font-size: 20px" name="#icon-xiangmu" />
    <span style="margin-left: 8px">{{ data.title }}</span>
    <span style="margin-left: 30px">
      <a-tag :color="data.publishedStatus === 1 ? 'green' : 'default'">
        {{ data.publishedStatus === 1 ? '已发布' : '未发布' }}
      </a-tag>
    </span>
    <span style="margin: 5px">
      <project-menu @menu-click="menuClick" :data="props.data"></project-menu>
    </span>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import iconfont from '@/components/iconfont.vue'
import projectMenu from './project-menu.vue'

let props = defineProps({
  data: { type: Object, default: () => {} },
})

// let titleDiv = document.getElementById('titleDiv')
// // console.log('titleDiv', titleDiv)
// // 监听窗口大小改变事件
// window.addEventListener('resize', () => {
//   // 实时计算并输出宽度
//   console.log('Resized width:', titleDiv.offsetWidth)
// })
let emit = defineEmits(['menuClick'])
function menuClick(data) {
  emit('menuClick', data)
}
</script>
<style scoped lang="less">
.name-div {
  height: 40px;
  width: 300px;
  border: solid 1px #e9e6de;
  display: flex;
  justify-content: flex-end;
  align-items: center; // 垂直居中
}
</style>
